<template>
  <div v-loading="loading">
    <!-- filter start -->
    <div class="filter-container">
      <el-form ref="filterForm" :model="filterForm" inline label-width="100px" size="small">
        <el-form-item prop="name" label="店铺名称：">
          <el-input v-model="filterForm.name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="search">查 询</el-button>
          <el-button round @click="reset">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- filter end -->

    <div class="table-container">
      <el-table
        :data="list"
        border
        stripe
        style="width: 100%"
        size="small"
        element-loading-text="加载中"
        empty-text="暂无数据"
      >
        <el-table-column prop="storeId" label="店铺ID" width="100" />
        <el-table-column prop="name" label="店铺名称" />
        <el-table-column prop="disabled" label="店铺状态" width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.disabled" class="app-text-color-danger">已关停</span>
            <span v-else>启用中</span>
          </template>
        </el-table-column>
        <el-table-column label="选择" width="100">
          <template slot-scope="scope">
            <el-radio
              v-model="form.commonCode"
              :label="scope.row.storeId"
              :disabled="scope.row.disabled"
              @change="choose(scope.row)"
            >
              {{ form.commonCode === scope.row.storeId ? '已选' : '选择' }}
            </el-radio>
          </template>
        </el-table-column>
      </el-table>
    </div>

  </div>
</template>

<script>
import { storeList } from '@/views/wxaMallModule/api/shop'

export default {
  props: {
    row: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      // 配置
      // 状态
      loading: false,
      // 数据
      filterForm: {
        name: null
      },
      form: {
        commonCode: null
      },
      list: []
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
    this.form.commonCode = this.row.insideParams.commonCode
    this.fetchData()
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取门店列表
    fetchData() {
      this.loading = true
      storeList(this.filterForm).then(res => {
        this.list = res.data || []
      }).finally(() => {
        this.loading = false
      }
      )
    },

    /**
     * 按钮组
     */
    // 查询
    search() {
      this.fetchData(1)
    },

    // 重置
    reset() {
      this.$refs.filterForm.resetFields()
    },

    // 选择
    choose(row) {
      const params = {
        insidePage: 'SHOPMALL',
        path: 'SHOPMALL',
        mode: 'navigateTo',
        insideParams: {
          insidePageType: 'SHOPMALL',
          commonCode: row.storeId,
          remark: '站内链接 > 商城店铺 > ' + row.name
        }
      }
      this.$emit('selectInsideLink', { type: 'SHOPMALL', params })
    }
    /**
     * 状态组
     */
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
